<template>
  <div class="container">
    <div class="layout">
      <div class="layout-header">
        <a-row style="padding: 0 4px 0 4px; width: 100%">
          <a-form
            ref="empSearchForm"
            :model="employeePageQry"
            :layout="'inline'"
            :size="'mini'"
            @submit="search"
          >
            <a-col :span="6">
              <a-form-item field="departmentId" label="部门">
                <DepartmentCascaderSingle
                  v-model:department-id="employeePageQry.departmentId"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                field="keyword"
                label="关键词"
                :rules="[{ required: false, message: '关键词不能为空' }]"
                :validate-trigger="['change', 'blur']"
              >
                <a-input
                  v-model="employeePageQry.keyword"
                  placeholder="姓名、手机号搜索"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                field="position"
                label="职位"
                :rules="[{ required: false, message: '职位不能为空' }]"
                :validate-trigger="['change', 'blur']"
              >
                <a-input
                  v-model="employeePageQry.position"
                  placeholder="职位名称搜索"
                />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-space>
                <a-button
                  :size="'mini'"
                  :type="'secondary'"
                  html-type="reset"
                  :loading="loading"
                >
                  {{ `重置` }}
                </a-button>
                <a-button
                  :size="'mini'"
                  type="primary"
                  html-type="submit"
                  :loading="loading"
                >
                  {{ `查询` }}
                </a-button>
              </a-space>
            </a-col>
          </a-form>
        </a-row>
        <a-row style="padding: 4px; width: 100%">
          <a-col :span="4">
            <a-button
              :type="'outline'"
              :size="'mini'"
              @click="showEmpSignUpLink"
            >
              {{ `邀请员工` }}
            </a-button>
          </a-col>
        </a-row>
      </div>
      <div class="layout-content">
        <a-table
          class="`layout-table`"
          :data="data"
          :bordered="true"
          :stripe="true"
          :size="'mini'"
          :table-layout-fixed="true"
          :loading="false"
          :row-selection="{
            type: 'checkbox',
            showCheckedAll: true,
          }"
          :scroll="{
            maxHeight: 780,
          }"
          row-key="id"
          :pagination="pagination as Pagination"
          @page-change="onPageChange"
        >
          <template #columns>
            <a-table-column
              v-for="(item, idx) in EMPLOYEE_COLUMNS"
              :key="idx"
              :title="item.title as string"
              :data-index="item.dataIndex"
              :width="item.width"
              :fixed="item.fixed"
              :align="'center'"
            >
              <template #cell="{ rowIndex, record }">
                <span v-if="item.dataIndex === 'action'">
                  <a-space :size="'mini'">
                    <a-button :size="'mini'" :type="'text'">详情</a-button>
                    <a-button
                      v-if="record.status.name === 'DOING'"
                      :size="'mini'"
                      :type="'text'"
                      >审核</a-button
                    >
                    <a-button
                      v-if="record.status.name === 'DONE'"
                      :size="'mini'"
                      :type="'text'"
                      >离职</a-button
                    >
                    <a-button
                      v-if="record.status.name === 'QUIT'"
                      :size="'mini'"
                      :type="'text'"
                      >召回</a-button
                    >
                  </a-space>
                </span>
                <span v-else-if="item.dataIndex === 'idx'">
                  {{ calcTableIdx(rowIndex, pagination) }}
                </span>
                <div v-else-if="item.dataIndex === 'status'">
                  <StatusTag
                    :source="'table'"
                    :name="record.status.name"
                    :status-list="EmployeeStatus"
                  />
                </div>
                <div v-else-if="item.dataIndex === 'gender'">
                  <StatusTag
                    :source="'table'"
                    :name="record.gender.name"
                    :status-list="Gender"
                  />
                </div>
                <span v-else-if="item.dataIndex === 'departmentId'">
                  {{ record.department.name }}
                </span>
                <span v-else>{{ record[item.dataIndex] }}</span>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </div>

    <!--  邀请员工弹框  -->
    <EmpSignUpLink
      v-if="empSignUpLinkVisible"
      :visible="empSignUpLinkVisible"
      @hidden="hideEmpSignUpLink"
    />
  </div>
</template>

<script lang="ts" setup>
  import StatusTag from '@/components/business/status-tag/index.vue';
  import DepartmentCascaderSingle from '@/components/business/department/cascader-sginle/index.vue';
  import useLoading from '@/hooks/loading';
  import { reactive, ref } from 'vue';
  import {
    EmployeePageQry,
    EmployeeView,
    EMPLOYEE_COLUMNS,
  } from '@/types/idm/employee';
  import { EmployeeStatus, Gender } from '@/api/enumObj';
  import { fetchEmployeePage } from '@/api/idm/employee';
  import { Pagination, PaginationModel } from '@/types/global';
  import { CommonEnum } from '@/types/global-business';
  import { calcTableIdx } from '@/utils/calculator';
  import EmpSignUpLink from './components/emp-sign-up-link.vue';

  const errorMessage = ref('');
  const { loading, setLoading } = useLoading();
  const empSignUpLinkVisible = ref(false);
  const showEmpSignUpLink = () => {
    empSignUpLinkVisible.value = true;
  };
  const hideEmpSignUpLink = () => {
    empSignUpLinkVisible.value = false;
  };

  // // 进入页面之后执行的第一个函数
  // const onPageLoad = async (qry: any) => {
  //   const res = await treeAll({} as DepartmentTreeQry);
  //   const rootDepartmentList = res.data as DepartmentView[];
  //   departmentOptions.value = rootDepartmentList;
  //   console.log("plat-org-emp: departmentOptions: ");
  // };
  // onPageLoad({});

  const basePagination: Pagination = {
    current: 1,
    pageSize: 50,
  };
  const pagination = reactive({
    ...PaginationModel,
    ...basePagination,
  });
  const generatePageQryModel = reactive({
    ...basePagination,
    companyId: undefined,
    departmentId: undefined,
    keyword: '',
    statusList: [] as CommonEnum[],
  } as EmployeePageQry);
  const employeePageQry = ref<EmployeePageQry>(generatePageQryModel);
  const data = ref<EmployeeView[]>([]);

  const fetchData = async (qry: EmployeePageQry) => {
    setLoading(true);
    try {
      qry.fetchDepartment = true;
      const res = await fetchEmployeePage(qry);
      data.value = res.data.records as EmployeeView[];
      pagination.current = res.data.current;
      pagination.total = res.data.total;
    } catch (err) {
      errorMessage.value = (err as Error).message;
    } finally {
      setLoading(false);
    }
  };

  const search = () => {
    fetchData({
      ...basePagination,
      ...employeePageQry.value,
    } as unknown as EmployeePageQry);
  };
  const onPageChange = (current: number) => {
    fetchData({
      ...basePagination,
      ...employeePageQry.value,
      current,
    } as EmployeePageQry);
  };

  fetchData({
    ...basePagination,
    ...employeePageQry.value,
  } as EmployeePageQry);
</script>

<script lang="ts">
  export default {
    name: 'PlatIdmOrgEmp',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 4px 8px 4px 4px;
    background-color: var(--color-bg-2);
    width: 100%;
    height: 100%;
  }

  .layout {
    //padding: 8px;

    .-header {
      //padding: 4px 4px 0 4px;
      width: 100%;
    }

    .-content {
      position: relative;
      width: 100%;

      .-table {
        padding: 8px;

        .-row {
          height: 20px;
          padding: 4px 4px 0 4px;
        }
      }
    }
  }
</style>
